<template >
  <div>
    <HelloWorld :msg="name" @changeMsg="fn" :color="color" />
    {{ name }}
    <button @click="fn">change</button>
    <span>{{ a }}</span>
    <div>{{ nameValue }}</div>
    <!-- <span>{{ b }}</span> -->
    <!-- <ul>
      <li v-for="item in obj" :key="item">{{ item }}</li>
    </ul> -->
  </div>
</template>
<script>
import { ref, reactive, toRef, onMounted, watch } from 'vue'
import HelloWorld from './components/HelloWorld.vue'
// setup 在beforeCreate之前执行，没有this,属于vue3新增的一个生命周期
// 定义数据

const useFn = () => {
  const name = ref('tom')

  const fn1 = () => {
    console.log('fn')
  }

  onMounted(() => {
    console.log('onMounted')
  })

  return { name, fn1 }
}

export default {
  name: 'app-1',
  components: {
    HelloWorld
  },
  setup() {
    // ref，reactive
    // proxy({value: 'tom'},)
    // 基本数据类型 ， string、boolean、null、number
    // const name = ref('tom')
    const { name } = useFn()
    // ref 取值用ref.value,赋值ref.value = xxx
    // 引用数据类型
    const obj = reactive({
      a: 1,
      b: 2,
      c: {
        d: 1
      }
    })
    // reactive, 取值赋值直接使用

    // console.log(name)
    const fn = (value) => {
      // console.log('fn')
      name.value += value

      // console.log(obj.a)
      // obj.a = 12
      // obj.c = {
      //   d: 2
      // }
      // obj.c = 12
    }

    // toRefs
    // const { a, b } = toRefs(obj)

    // toRef
    const a = toRef(obj, 'a')


    const stop = watch(name, (newValue, oldValue) => {
      console.log('name change', newValue, oldValue)
      setTimeout(() => {
        stop()
      }, 1000)
    })
    // // watch惰性
    // // 监听对象的某个属性，需要传入一个函数，return 想要监听的属性
    // 返回值为stop函数，调用stop可以实现对watch的停止监听
    // watch(() => obj.c, (newValue, oldValue) => {
    //   console.log('obj.c change', newValue, oldValue)
    // })
    // ref/reactive/function
    // watch([() => obj.c, name], ([objCNewValue, nameNewValue], oldValue) => {
    //   console.log('name or obj.c change', objCNewValue, nameNewValue, oldValue)
    // })

    // const nameValue = computed({
    //   get() {
    //     return name.value + '2'
    //   },
    //   set(newValue) {
    //     name.value = newValue.slice(0, newValue.length - 1)
    //   }
    // })

    // 生命周期，以on开头，传入生命周期的事件回调
    onMounted(() => {
      // console.log('mount')
      // setTimeout(() => {
      //   nameValue.value = 'lisi2'
      // }, 2000)
    })


    // console.log(nameValue, 'nameValue')

    // vue2 选项式options写法
    // vue3 组合式composition写法


    return {
      name,
      fn,
      a,
      // nameValue,
      // b
    }
  }
  // computed: {
  //   name() {

  //     return 
  //   }

  // }
  // watch: {
  //   name() {
  //     console.log('name change')
  //   }
  // }
}
</script>
<style ></style>